<template>
  <div class="wrap clearfix">
    <Aside></Aside>
    <!-- 入驻歌手主体部分 -->
    <div class="u-main f-fl">
      <!-- 入驻歌手 -->
      <div class="u-title">
        <h3>
          <span>入驻歌手</span>
        </h3>
      </div>
      <ul class="singer-list" v-if="signedList[0]">
        <!-- 图片展示 -->
        <li v-for="i1 in 70" :key="signedList[i1 - 1].id">
          <div class="u-cover">
            <img :src="signedList[i1 - 1].img1v1Url + '?param=130y130'" alt="" /><a
              href=""
              class="msk"
            ></a>
          </div>
          <p>
            <!-- <a href="" class="name">{{ signedList[i1 - 1].name }} </a>
            <a href="" class="u-icn-wrap" v-if="signedList[i1 - 1].accountId"
              ><i class="u-icn"></i
            ></a> -->
            <router-link :to="`/artist?id=${signedList[i1 - 1].id}`" class="name"
              >{{ signedList[i1 - 1].name }}
            </router-link>
            <router-link
              :to="`/user/home?id=${signedList[i1 - 1].accountId}`"
              class="u-icn-wrap"
              v-if="signedList[i1 - 1].accountId"
              ><i class="u-icn"></i
            ></router-link>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Aside from '../Aside/Aside.vue'
export default {
  components: { Aside },
  data() {
    return {
      // 入驻歌手列表
      signedList: []
    }
  },
  methods: {
    // 获取入驻歌手列表
    async getSignedList() {
      // console.log(this.$route.query)
      const { data } = await this.$http.get('/artist/list?type=-1&area=-1&initial=-1&limit=100')
      // console.log(data)
      data.artists.forEach(item => {
        if (item.accountId) {
          this.signedList.push(item)
        }
      })
    }
  },
  created() {
    // 获取歌手列表
    this.getSignedList()
  }
}
</script>

<style lang="less" scoped>
@import url(./ArtistSigned.less);
</style>
